<template>
  <!--       卡片布局-->
  <div class="card">
    <div >
      <img  class="imgBox" :src="[ImgSrc]" />
    </div>
    <div class="content">
      <h3>{{title}}</h3>
      <p>
        {{CardDesc}}
      </p>
    </div>
  </div>

</template>

<script>
export default {
  name: "Card",
  props:{
    ImgSrc:{
      type:String,
      default:""
    },
    title:{
      type:String,
      default:""
    },
    CardDesc:{
      type:String,
      default:""
    }
  },
  data(){
    return{
      CardParm:""
    }
  },
  methods:{
    CardClick:function () {
      this.$emit('CardDescFreClick',this.CardParm)

    }
  }
}
</script>

<style scoped>
.card{
  position: relative;
  max-width: 300px;
  height: 230px;
  background: #fff;
  margin: 35px 15px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  transition: 0.3s ease-in-out;
}
.card:hover {
  height: 300px;
}
.card .imgBox {
  position: relative;
  width: 100px;
  height: 100px;
  top: -60px;
  left: 63px;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 260px, 0 260px);
  border-radius: 10px;
}
.content {
  position: relative;
  margin-top: -40px;
  padding: 5px 10px;
  text-align: center;
  color: #111;
  /*visibility: hidden;*/
  /*opacity: 0;*/
  transition: 0.3s ease-in-out;
}
</style>
